<template>
  <div id="header" class="dragable">
    <div
      class="minize icon-common no-dragable"
      :class="{ 'hidden-hover': isHidden }"
      @click="handlerOperateWindow(OperateType.Minimize)"
    >
      <img class="minize__image" src="@image/minimize.svg" />
    </div>
    <div
      class="close icon-common no-dragable"
      :class="{ 'hidden-hover': isHidden }"
      @click="handlerOperateWindow(OperateType.Close)"
    >
      <img class="close__image" src="@image/closeApp.svg" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
enum OperateType {
  Minimize,
  Close
}

const isHidden = ref<boolean>(false)
const ipcRenderer = window.electron.ipcRenderer

const handlerOperateWindow = (type: OperateType): void => {
  if (type === OperateType.Minimize) {
    ipcRenderer.send('minimize-window')
  } else {
    ipcRenderer.send('close-window')
  }
  isHidden.value = true // 手动隐藏hover
}

ipcRenderer.on('restore', () => {
  isHidden.value = false // 恢复hover
})
</script>

<style lang="less" scoped>
#header {
  position: fixed;
  width: var(--main-width);
  height: 50px;
  left: 5px;
  top: 5px;
}
.icon-common {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 12.5px;
  width: 35px;
  height: 25px;
  cursor: pointer;
}
.minize {
  right: 50px;
  &__image {
    width: 40%;
    height: auto;
    opacity: 0.8;
  }
  &:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
}
.close {
  right: 10px;
  &__image {
    width: 35%;
    height: auto;
    opacity: 0.8;
  }
  &:hover {
    background-color: rgba(237, 55, 30, 0.9);
  }
}
.hidden-hover {
  &:hover {
    background-color: transparent;
  }
}
</style>
